<template>
  <el-dialog v-if="dialogGroupListVisible" width="50%" title="选择群" :visible.sync="dialogGroupListVisible" :close-on-click-modal="false">
    <div class="card-list">
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="6">
              <el-form-item label="群名称：">
                <el-input v-model="searchParams.name" style="width: 240px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <SearchButton :default-params="searchParams" @refreshParams="refreshParams" @getList="getList1" />
        </el-form>
      </el-card>
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar>
          <template v-slot:tools>
            <vxe-button class="tool-btn" type="text" size="small" icon="el-icon-refresh" @click="getList1()">刷新</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTable"
          border
          resizable
          show-overflow
          highlight-hover-row
          :loading="loading"
          :auto-resize="true"
          :data="tableData"
          width
          max-height="500"
          :print-config="{}"
          header-align="center"
          :checkbox-config="{checkRowKeys: checkList, checkStrictly: false}"
          @checkbox-all="selectAll"
          @checkbox-change="selectChangeEvent"
        >
          <vxe-table-column type="checkbox" width="35" />
          <vxe-table-column field="name" width="180" title="群名称" />
          <vxe-table-column field="ownerName" min-width="100" align="left" title="群主" />
          <vxe-table-column field="groupTagsStr" width="250" align="left" title="群标签" />
          <vxe-table-column field="buildTime" width="180" align="left" title="建立时间" />
          <vxe-table-column field="statusDesc" width="120" align="center" title="状态" />
        </vxe-table>
        <vxe-pager
          :current-page.sync="pageNum"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getList()"
        />
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogGroupListVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSelect">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import SearchButton from '@/components/SearchButton'
import { getGroupPageList } from '@/api/cop/group'
export default {
  components: {
    SearchButton
  },
  props: {
    // 下拉列表
    list: {
      type: Array,
      required: true
    },
    ids: {
      type: String,
      required: true
    },
    disabled: {
      required: false,
      type: Boolean,
      default: () => false
    },
    // 选中的
    selecteList: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data() {
    return {
      dialogGroupListVisible: false,
      checkList: [],
      checked: false,
      checkedNum: 0,
      searchParams: {
        name: ''
      },
      params: {},
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      loading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    init() {
      this.dialogGroupListVisible = true
    },
    getList1() {
      this.searchParams.pageNum = 1
      this.getList()
    },
    // 列表
    getList() {
      getGroupPageList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ... this.searchParams
      }).then(response => {
        if (response) {
          this.tableData = response.records
          this.total = response.total
          this.checkList = []
          this.checkedNum = 0
        }
      }).catch((err) => {
        this.$message.err(err.msg)
      })
    },
    selectAll(e) {
      if (e.checked) {
        this.checkList.push(...e.records.map(item => item.id))
        this.checkList = Array.from(new Set(this.checkList))
        this.checkedNum = this.checkList.length
      } else {
        const arr = this.list.map(item => item.id)
        const arr1 = []
        this.checkList.forEach((item, index) => {
          arr.forEach(it => {
            if (item === it) {
              arr1.push(index)
            }
          })
        })
        arr1.reverse().forEach(item => {
          this.checkList.splice(item, 1)
        })
      }
      this.checkedNum = this.checkList.length
    },
    selectChangeEvent(row) {
      let i = -1
      this.checkList.forEach((item, index) => {
        if (item === row.row.id) {
          i = index
        }
      })
      if (i === -1) {
        this.checkList.push(row.row.id)
      } else {
        this.checkList.splice(i, 1)
      }
      this.checkedNum = this.checkList.length
    },
    handleSelect() {

    }
  }
}
</script>

<style lang="scss">
.cop_friends {
  .card-list {
    width: 100%;
  }
  .headerIcon {
    width: 40px;
    height: 40px;
  }
}

</style>
